<template>
  <div id="micro-communities" :style="{ backgroundColor: datas ? datas.preview_color || '#f5f5f5' : '#f5f5f5' }" style="text-align: left;">
    <postItem v-for="(item, i) in list" :data="item" type="micro" :key="i" :hide_comment="hide_comment">
    </postItem>
    <div class="load" v-if="!showLoading">
      <img src="../assets/images/video-loading.gif" alt="loading" />
    </div>
    <div class="h-625"></div>
    <div v-if="isDiy">
      <div style="width: 100%; height: 40px; line-height: 40px; text-align: center;" v-if="isLoadMore && showLoading" @click="getMoreData">{{ $i18n.t("加载更多") }}</div>
      <div style="width: 100%; height: 40px; line-height: 40px; text-align: center;" v-if="!isLoadMore && showLoading">{{ $i18n.t("没有更多了") }}~</div>
    </div>
  </div>
</template>

<script>
import postItem from "./circleCommunity/postItem.vue";
export default {
  components: { postItem },
  props: ["list", "showLoading", "isDiy", "isLoadMore",  "datas","hide_comment"],
  data() {
    return {
    };
  },
  mounted() {
    this.$emit("loadMore", true);
  },
  activated() {
    this.$emit("loadMore", true);
  },
  methods: {
    getMoreData() {
      this.$emit("getMore", true);
    },
    //检查图片是否加载成功
    checkImg(id) {
      this.list.forEach(item => {
        if (item.id == id) {
          item.has_many_image[0].url = "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img_404.png";
        }
      });
    },

  }
};
</script>

<style scoped lang="scss">
#micro-communities {
  padding:0.75rem;
}

.load {
  text-align: center;

  img {
    width: 3rem;
  }
}

.h-625 {
  height: 0.625rem;
}
</style>